<script setup lang="ts">
import { ref, nextTick } from "vue";
const props = defineProps(["items", "resolver"]);
const items: any = ref([]);
items.value = props.items;
const emits = defineEmits(["remove", "add"]);
const visible = ref(false);
const inputRef: any = ref();
const name = ref("");
const handleClose = (index: any) => {
    emits("remove", items.value[index]);
    items.value.splice(index, 1);
};
const showInput = () => {
    visible.value = true;
    nextTick(() => {
        inputRef.value!.input!.focus();
    });
};
const handleConfirm = () => {
    if (name.value) {
        items.value.push(name.value);
        emits("add", name.value, props.resolver);
    }
    visible.value = false;
    name.value = "";
};
</script>
<template>
    <div class="flex flex-wrap gap-2 mt-1">
        <el-tag v-for="(item,index) in items" :key="index" closable :disable-transitions="false" @close="handleClose(index)" type="info" effect="plain">
            {{ item }}
        </el-tag>
        <el-input v-if="visible" ref="inputRef" v-model="name" class="!w-20" size="small" @keyup.enter="handleConfirm" @blur.stop="handleConfirm" />
        <el-button v-else size="small" @click="showInput">
            + 新增
        </el-button>
    </div>
</template>